<template>
  <div class="home-page">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-card">
        <div class="welcome-content">
          <h1 class="welcome-title">欢迎使用 Shoes On Line 后台管理系统</h1>
          <p class="welcome-subtitle">高效管理您的在线鞋类商城</p>
          <div class="welcome-stats">
            <div class="stat-item">
              <div class="stat-number">{{ stats.totalProducts }}</div>
              <div class="stat-label">商品总数</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ stats.totalOrders }}</div>
              <div class="stat-label">订单总数</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ stats.totalUsers }}</div>
              <div class="stat-label">用户总数</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">¥{{ stats.totalRevenue }}</div>
              <div class="stat-label">总营收</div>
            </div>
          </div>
        </div>
        <div class="welcome-image">
          <div class="dashboard-icon">📊</div>
        </div>
      </div>
    </div>

    <!-- 快速操作区域 -->
    <div class="quick-actions">
      <h2 class="section-title">快速操作</h2>
      <div class="action-grid">
        <div class="action-card" @click="navigateTo('商品列表')">
          <div class="action-icon">📦</div>
          <div class="action-title">商品管理</div>
          <div class="action-desc">添加、编辑和管理商品信息</div>
        </div>
        <div class="action-card" @click="navigateTo('待发货订单')">
          <div class="action-icon">📋</div>
          <div class="action-title">订单处理</div>
          <div class="action-desc">查看和处理待发货订单</div>
        </div>
        <div class="action-card" @click="navigateTo('用户列表')">
          <div class="action-icon">👥</div>
          <div class="action-title">用户管理</div>
          <div class="action-desc">管理用户信息和权限</div>
        </div>
        <div class="action-card" @click="navigateTo('业绩报表')">
          <div class="action-icon">📊</div>
          <div class="action-title">数据报表</div>
          <div class="action-desc">查看销售和业绩数据</div>
        </div>
      </div>
    </div>

    <!-- 系统状态区域 -->
    <div class="system-status">
      <h2 class="section-title">系统状态</h2>
      <div class="status-grid">
        <div class="status-card">
          <div class="status-header">
            <div class="status-title">服务器状态</div>
            <div class="status-indicator online"></div>
          </div>
          <div class="status-content">
            <div class="status-item">
              <span class="status-label">运行时间:</span>
              <span class="status-value">{{ systemStatus.uptime }}</span>
            </div>
            <div class="status-item">
              <span class="status-label">CPU使用率:</span>
              <span class="status-value">{{ systemStatus.cpu }}%</span>
            </div>
            <div class="status-item">
              <span class="status-label">内存使用:</span>
              <span class="status-value">{{ systemStatus.memory }}%</span>
            </div>
          </div>
        </div>
        
        <div class="status-card">
          <div class="status-header">
            <div class="status-title">今日概览</div>
            <div class="status-indicator active"></div>
          </div>
          <div class="status-content">
            <div class="status-item">
              <span class="status-label">新增订单:</span>
              <span class="status-value">{{ todayStats.newOrders }}</span>
            </div>
            <div class="status-item">
              <span class="status-label">新增用户:</span>
              <span class="status-value">{{ todayStats.newUsers }}</span>
            </div>
            <div class="status-item">
              <span class="status-label">今日销售:</span>
              <span class="status-value">¥{{ todayStats.sales }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      stats: {
        totalProducts: 1256,
        totalOrders: 3428,
        totalUsers: 8965,
        totalRevenue: '2,456,789'
      },
      systemStatus: {
        uptime: '15天 8小时',
        cpu: 35,
        memory: 68
      },
      todayStats: {
        newOrders: 45,
        newUsers: 23,
        sales: '15,680'
      }
    };
  },
  methods: {
    navigateTo(menuName) {
      this.$emit('navigate', menuName);
    }
  }
};
</script>

<style scoped>
.home-page {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100%;
}

/* 欢迎区域 */
.welcome-section {
  margin-bottom: 30px;
}

.welcome-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  padding: 40px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
  position: relative;
  
}

.welcome-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.welcome-content {
  flex: 1;
  z-index: 1;
}

.welcome-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 10px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.welcome-subtitle {
  font-size: 18px;
  margin: 0 0 30px 0;
  opacity: 0.9;
}

.welcome-stats {
  display: flex;
  gap: 30px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.8;
}

.welcome-image {
  z-index: 1;
}

.dashboard-icon {
  font-size: 80px;
  opacity: 0.8;
}

/* 快速操作区域 */
.quick-actions {
  margin-bottom: 30px;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 20px 0;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.action-card {
  background: white;
  border-radius: 15px;
  padding: 25px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid #e1e8ed;
}

.action-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #667eea;
}

.action-icon {
  font-size: 40px;
  margin-bottom: 15px;
}

.action-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
}

.action-desc {
  font-size: 14px;
  color: #7f8c8d;
  line-height: 1.4;
}

/* 系统状态区域 */
.system-status {
  margin-bottom: 30px;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.status-card {
  background: white;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid #e1e8ed;
}

.status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.status-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: relative;
}

.status-indicator.online {
  background: #27ae60;
  box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.3);
}

.status-indicator.active {
  background: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

.status-indicator::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
}

.status-content {
  space-y: 12px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f8f9fa;
}

.status-item:last-child {
  border-bottom: none;
}

.status-label {
  color: #7f8c8d;
  font-size: 14px;
}

.status-value {
  color: #2c3e50;
  font-weight: 600;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .welcome-card {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
  }

  .welcome-stats {
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
  }

  .welcome-title {
    font-size: 24px;
  }

  .dashboard-icon {
    font-size: 60px;
    margin-top: 20px;
  }

  .action-grid {
    grid-template-columns: 1fr;
  }

  .status-grid {
    grid-template-columns: 1fr;
  }
}
</style>